﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>autoNumeric 2.0</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="autoNumeric-2.0-BETA.js"></script>
<script type="text/javascript">
jQuery(function($) {
	$('input:text').autoNumeric("init");
	$('#testTest').autoNumeric("init");

		
	$('#seven').keyup(function (e) {
		console.log('yes');
		var value = $('#seven').autoNumeric('get'),
			keyCode = e.keyCode,
			position = {};
			console.log(keyCode);
		if (this.selectionStart === undefined) {
			this.focus();
			var select = document.selection.createRange();
			position.length = select.text.length;
			select.moveStart('character', -this.value.length);
			position.end = select.text.length;
			position.start = position.end - position.length;
		} else {
			position.start = this.selectionStart;
			position.end = this.selectionEnd;
			position.length = position.end - position.start;
		}
		if (keyCode === 8 || keyCode === 46 || (keyCode >= 48 && keyCode <= 57) || keyCode === 107 || keyCode === 109|| keyCode === 189) {
			console.log('why');
			if (value < 0 && $('#seven').val().indexOf('n') === -1) {
				$('#seven').autoNumeric('update', {aSuffix: ' negative'});
			}
			if (value > 0 && $('#seven').val().indexOf('p') === -1) {
				$('#seven').autoNumeric('update', {aSuffix: ' positive'});
			}
		}		
		if (this.selectionStart === undefined) {
			this.focus();
			var r = that.createTextRange();
			r.collapse(true);
			r.moveEnd('character', position.end);
			r.moveStart('character', position.start);
			r.select();
		} else {
			this.selectionStart = position.start;
			this.selectionEnd = position.end;
		}
	});
	
	$('#seven').focusout(function (e) {
		var value = $('#seven').autoNumeric('get');
		console.log('bob');
		if (value < 0) {
				$('#seven').autoNumeric('update', {nBracket: '(,)'});
			}
   
   });
   
   $("#unSet").click(function(){
		$('form input:text').autoNumeric('unSet');
   }); 

    $("#reSet").click(function(){
		$('form input:text').autoNumeric('reSet');
   }); 
   
    $('#wipe').click(function () {
       	$('form input:text').autoNumeric('wipe');
    });

    $('#destroy').click(function () {
        $('form input:text').autoNumeric('destroy');
    });

 });
</script>
<style>
input[type="text"] {
	text-align:right;
}
</style>
</head>

<body style="">
<h2>autoNumeric-2.0-BETA</strong></h2>
<p>last update 2014-17-07 GMT 9:00 PM</p>
<h3>New methods</h3>
<p><strong>"unSet"</strong> - displays the raw value of the input.</p>
<ul>
  <li>$(selector).autoNumeric('unSet'); - returns a numeric string as 'nnnn.nn' with the period '.' as the decimal character</li>
  <li>$(selector).autoNumeric('unSet', 'asKomma'); - returns numeric string 'nnnn,nn' with the comma / Komma  ',' as the decimal character</li>
  <li>$(selector).autoNumeric('unSet', 'checkOptions'); - checks the options for the input and returns numeric string 'nnnn.nn' or 'nnnn,nn' based on the settings.</li>
</ul>
<ul>
  <li>This displays unformatted (xxxx.xx) numeric strings in the form inputs that are controlled by autoNumeric.</li>
  <li>autoNumeric is not "destroyed" allowing you to easily reformat the field after the form has been posted via the "reSet" option of the "set" method (see below).</li>
  <li>The "unSet" method will display the expanded decimal places if  the "eDec" option is used.</li>
</ul>
<p><strong>&quot;reSet&quot;</strong> - resets the unset value</p>
<ul>
  <li>Convenient way to reset value after post</li>
</ul>
<p><strong>&quot;wipe'</strong> - deletes the value and any sessionStorage or cookies that were created by autoNumeric</p>
<ul>
  <li>Unlike the &quot;destroy&quot; method autoNumeric is still active</li>
  <li>See option aStor below</li>
</ul>
<p><strong>&quot;destroy'</strong> - modified to delete value, sessionStorage or cookies that were created by autoNumeric and kills autoNumeric</p>
<h3>Modified methods</h3>
<p><strong>"get"</strong> - displays the raw value of the input.</p>
<ul>
  <li>$(selector).autoNumeric('get'); - returns a numeric string as 'nnnn.nn' with the period '.' as the decinal charcter</li>
  <li>$(selector).autoNumeric('get', 'asKomma'); - returns numeric string 'nnnn,nn' with the comma / Komma  ',' as the decinal charcter</li>
  <li>$(selector).autoNumeric('get', 'checkOptions'); - checks the options for the input and returns numeric string 'nnnn.nn' or 'nnn,nn' based on the settings.</li>
</ul>
<p><strong>"getString"</strong> - displays the raw value of the input.</p>
<ul>
  <li>$(selector).autoNumeric('getString'); - returns a numeric string as 'nnnn.nn' with the period '.' as the decinal charcter</li>
  <li>$(selector).autoNumeric('getString', 'asKomma'); - returns numeric string 'nnnn,nn' with the comma / Komma  ',' as the decinal charcter</li>
  <li>$(selector).autoNumeric('getString', 'checkOptions'); - checks the options for the input and returns numeric string 'nnnn.nn' or 'nnn,nn' based on the settings.</li>
</ul>
<p><strong>"getArray"</strong> - displays the raw value of the input.</p>
<ul>
  <li>$(selector).autoNumeric('getArray'); - returns a numeric string as 'nnnn.nn' with the period '.' as the decinal charcter</li>
  <li>$(selector).autoNumeric('getArray', 'asKomma'); - returns numeric string 'nnnn,nn' with the comma / Komma  ',' as the decinal charcter</li>
  <li>$(selector).autoNumeric('getArray', 'checkOptions'); - checks the options for the input and returns numeric string 'nnnn.nn' or 'nnn,nn' based on the settings.</li>
</ul>
<h3>New options and modifications</h3>
<p><strong>"eDec"</strong> - this displays expanded decimal places when the input has focus.</p>
<ul>
  <li>Default value "eDec: null"</li>
  <li>eDec - value must be enclosed in quotes - example eDec: '5'</li>
  <li>The "eDec" value should be either "null" or greater than the normal decimal places set by the "vMin" &amp; "vMax" values or "mDec" option.</li>
  <li>If the value being "set" is longer than the "eDec" value being set will be rounded.</li>
  <li>Currently there is no padding when the input has focus.</li>
  <li><strong>Note - </strong> "eDec" will function properly with the following exception: if the "aStor = false" (the default) and the client navigates away from the page the extended value is lost and will be replaced with the non extended value! </li>
  <li><strong>Note</strong> - to  ensure the  extended value (eDec) is retained the "aStor" option must be set to "true" see details below.</li>
</ul>
<p><strong>"nSep"</strong> - this displays the number with decimal only  when the input has focus.</p>
<ul>
  <li>This is similar to the behavior of a spread  spreadsheet </li>
  <li>On focusout the value is formatted again</li>
</ul>
<p><strong>"aStor"</strong> - when true allows the "eDec" value to be retained via sessionStorage on compatible browsers of a session cookie in EI 6 &amp; 7.</p>
<ul>
  <li>Default value "aStor: true" </li>
  <li>Set to "aStor: false" to NOT use session storage.</li>
  <li><strong>Note</strong> - sessionStorage or session cookie is used only on fields when eDec does not equal null and is greater than mDec. </li>
  <li><strong>Note</strong> - once the browser is shut down or the tab is closed all extended values held in sessionStorage or cookies are deleted.</li>
</ul>
<p><strong>"oRide"</strong> - overrides min / max values and controls the number of integers. Helpful when you run into the limits of javaScript math accuracy.</p>
<ul>
  <li> example oRide: '6,0' allows positive values only with 6 integers with zero decimal places</li>
  <li> example oRide: '-8,2' allows positive and negative values with 8 integers and 2 decimal places</li>
  <li>Note - do not use the 'mDec' option when using &quot;oRide&quot;</li>
</ul>
<p><strong>"pNeg"</strong> - positions the minus sign &quot;-&quot; to the left or the right of the currency sign.</p>
<ul>
  <li>Only works when the currency sign is a prefix</li>
  <li>When the &quot;-&quot; is the the right of the currency sign &quot;negative brackets will not function</li>
</ul>
<p><strong>"aSuffix"</strong> - allows a suffix to be place at the far right.</p>
<ul>
  <li>Can be used with &quot;aSign&quot; in either prefix or suffix</li>
</ul>
<p><strong>"mRound"</strong> - added rounding method used in Switzerland</p>
<ul>
  <li>mRound: &quot;CHF&quot; rounds to the nearest .X0 or .X5</li>
</ul>
<p><strong>&quot;dGroup&quot;</strong> - modified the digital grouping</p>
<ul>
  <li>Support for a modified lakh &quot;22,333,22,22,333.00&quot; that can be used for scaling</li>
</ul>
<p><strong>&quot;sNumber&quot;</strong> - Modifies how the select all from keyboard functions</p>
<ul>
  <li>determine if the select all keyboard command will select the complete input text or only the input numeric value<br>
  </li>
</ul>
<p><strong>Notes:</strong></p>
<ul>
  <li>Default values and Values being set can use either the period '.' or Komma ',' as the decimal character</li>
</ul>
<p><strong>Demonstration showing the new features:</strong></p>
<ul>
  <li>Focus and focusout of the inputs to see the behavior for the different inputs.</li>
  <li>Change the values.</li>
  <li>Navigate away and return to see the values are retained and see how the "aStor" option behaves.</li>
  <li>Press  the "unSet" and the "set" method with the "reSet" value.</li>
  <li>Press the &quot;wipe&quot; and try entering leters.</li>
  <li>Press the &quot;destroy&quot; and try entering leters.</li>
  <li>reload page and try more changes.</li>
</ul>
<form id="testBeta">
  <table width="1206" border="0">
    <tbody>
      <tr style="height:35px;">
        <td width="204"><strong> &nbsp;Input</strong></td>
        <td width="182"><strong>Demonstrates</strong></td>
        <td width="806"><strong> value and options</strong></td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="one" id="one" size="25" value="658765.66887" data-a-sign="$" data-e-dec="5"></td>
        <td>eDec, aStor</td>
        <td>value="1233333.888881" data-e-dec="5" data-a-stor=true</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="two" id="two" size="25" value="-10000,009999" data-e-dec="10" data-a-sep="." data-a-dec="," data-v-min="-11111111" data-n-bracket="(,)"
      
      ></td>
        <td>eDec, aStor</td>
        <td>value="-10000,009999" data-e-dec="10" data-v-min="-111111" data-n-bracket="(,)" data-a-stor=false</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="three" id="three" size="25" value="12345" data-a-sign=" $" data-n-sep="true"></td>
        <td>nSep</td>
        <td>value="12345" data-a-sign="€ " data-p-sign="s" data-n-sep=true</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="four" id="four" size="25" value="1237658.98798798" data-a-sign="€ " data-n-sep="true"  data-a-sep="." data-a-dec=","></td>
        <td>nSep</td>
        <td>value="1237658.98798798" data-a-sign="$ " data-n-sep=true</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="five" id="five" size="25" value="12345" data-a-sign="$ " data-a-suffix=" Dollar"></td>
        <td>aSuffix</td>
        <td>value="12345" data-a-sign="$" data-p-sign="s" data-r-val=true</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="six" id="six" size="25" value="1234567.89" data-a-sign="€ " data-a-sep="." data-a-dec="," data-a-suffix=" Euro"></td>
        <td>aSuffix</td>
        <td>value="1237658.98798798" data-a-sign="€" data-r-val=true</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="seven" id="seven" size="25" value="-1234.12345" data-a-sign="$ " data-e-dec="5" data-n-sep="true" data-v-min="-99999999999" data-n-bracket="(,)" data-a-suffix=" negative"></td>
        <td>eDec, nSep &amp; aSuffix</td>
        <td>value="1234.98798798" data-a-sign="$" data-e-dec="10" data-a-stor=true data-r-val=true</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="eight" id="eight" size="25" data-o-ride="6,3" ></td>
        <td>oRide: '6,3'</td>
        <td> data-o-ride=&quot;true&quot; Overrides the min/max values and controls the number of intergers</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="nine" id="nine" size="25" value="-1234567890" data-v-min="-9999999999999" data-p-neg="left" data-a-sign="&#8364; " data-a-sep='.' data-a-dec=','></td>
        <td>pNeg: 'left'</td>
        <td>data-p-neg=&quot;left&quot; places the minus sign to the left of the currency sign</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="ten" id="ten" size="25"  value="-1234567890" data-v-min="-9999999999999" data-p-neg="right"  data-a-sign="&#8364; " data-a-sep='.' data-a-dec=','></td>
        <td>pNeg: 'right'</td>
        <td>data-p-neg=&quot;right&quot; places the minus sign to the right of the currency sign</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="eleven" id="eleven" size="25" value="1234567.89" data-m-round="CHF" data-a-sign="CHF " data-a-sep="." data-a-dec=","></td>
        <td>mRound='CHF'</td>
        <td>data-m-round=&quot;CHF&quot; rounds to the nearest .00 or .05</td>
      </tr>
      <tr style="height:35px">
        <td><input type="text" name="fourteen" id="fourteen" size="25" value="123456789012" data-a-sign="Rs. " data-d-group="2s" data-v-max="99999999999999"></td>
        <td>dGroup: '2s'</td>
        <td>data-m-round=&quot;2s&quot;  data-a-sign="Rs. " scalling for "Lakh Crore"</td>
      </tr>
    </tbody>
  </table>
  &nbsp;
  <input type="button" style="width:75px" name="unSet" id="unSet" value="unSet">
  &nbsp;
  <input type="button" style="width:75px" name="reSet" id="reSet" value="reSet">
  <br>
  &nbsp;
  <input type="button" style="width:75px" name="wipe" id="wipe" value="wipe">
  &nbsp;
  <input type="button" style="width:75px" name="destroy" id="destroy" value="destroy">
  &nbsp;
</form>
<br>
<p>Text " contenteditable" - this is on my wish list is to eventually get autoNumeric to work here - the issue is there is no reliable method to place the caret.</p>
<p id="textTest" data-a-sign="$" contenteditable="true">$1,000.00</p>
</body>
</html>